<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-image: url('images/1.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            background-color: #e0f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.65);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            width: 600px;
            text-align: center;
<!--            margin-left: 20px; /* 左移整体 */-->
            margin-bottom: 50px;
        }

        h1 {
            opacity: 1;
            margin-top: 5px;
            margin-bottom: 15px;
            font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        /* 添加水平线样式 */
        hr {
            opacity: 1;
            margin-bottom: 30px;
            border: none;
            border-top: 2px solid #000000;
        }
        .form-group {
            opacity: 1;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            justify-content: center;
        }

        .form-group label {
            opacity: 1;
            flex: 0 0 120px; /* 调整标签宽度 */
            text-align: right;
            margin-right: 30px;
            margin-left: -20px; /* 左移输入框 */
        }

        .form-group input,
        .form-group select {
            opacity: 1;
            flex: 1;
            max-width: 250px; /* 增加输入框宽度 */
            margin-right: 20px;
            margin-left: -20px; /* 左移输入框 */
            height: 40px;
        }

        .form-group input::placeholder {
            opacity: 1;
            color: #ccc; /* 默认提示文本颜色 */
        }

        .btn {
            opacity: 1;
            margin-top: 20px;
            background-color: #3498db;
            color: #ffffff;
            font-size: 16px;
            width: 120px;
            height: 40px;
        }

        .register-link {
            opacity: 1;
            margin-top: 15px;
            margin-bottom: 5px;
        }
        /* 模态框样式 */
        .modal{
<!--            width: 350px;-->
            display: flex;
            margin-top: 300px;

            align-items: center;
            justify-content: center;
        }
        .modal-dialog{
        width: 350px;
        }
        .modal-title {
            width: 100%;
            text-align: center;
        }
        .modal-content {
            text-align: center;
        }

    </style>
</head>

<body>
    <div class="container">
        <h1 class="display-4">用户注册</h1>
        <hr>
        <form action="/register" method="post">
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name" class="form-control" placeholder="请输入姓名" required>
                <label for="username">用户名：</label>
                <input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="birthdate">出生日期：</label>
                <input type="date" name="birthdate" id="birthdate" class="form-control" placeholder="请输入日期" required>
                <label for="gender">性别：</label>
                <select name="gender" id="gender" class="form-control" required>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码" required>
                <label for="confirm-password">确认密码：</label>
                <input type="password" name="confirm-password" id="confirm-password" class="form-control" placeholder="请再次输入密码" required>
            </div>
            <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
        </form>

        <p class="register-link">已有账号？<a href="/login">立即登录</a></p>
    </div>
    <!-- Modal 模态框，用于显示错误信息 -->
    <div class="modal" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="errorModalLabel">注册失败</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="errorMessage"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- 注册页面 JavaScript 代码 -->
    <script>
        {% if error %}
            // 显示注册失败的错误信息
            document.getElementById('errorMessage').innerText = "{{ error }}";
            // 显示 Modal 模态框
            var myModal = new bootstrap.Modal(document.getElementById('errorModal'));
            myModal.show();
        {% endif %}
    </script>
</body>

</html>




<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Register</title>-->
<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            background-color: #e0f7fa;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            height: 100vh;-->
<!--        }-->

<!--        .container {-->
<!--            background-color: #ffffff;-->
<!--            padding: 30px;-->
<!--            border-radius: 10px;-->
<!--            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);-->
<!--            width: 400px;-->
<!--            text-align: center;-->
<!--        }-->

<!--        h1 {-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .form-group {-->
<!--            margin-bottom: 15px;-->
<!--        }-->

<!--        .btn {-->
<!--            margin-top: 10px;-->
<!--        }-->

<!--        .login-link {-->
<!--            margin-top: 10px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->

<!--<body>-->
<!--    <div class="container">-->
<!--        <h1>Register</h1>-->

<!--        <form action="/register" method="post">-->
<!--            <div class="form-group">-->
<!--                <label for="username">Username:</label>-->
<!--                <input type="text" name="username" id="username" class="form-control" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="password">Password:</label>-->
<!--                <input type="password" name="password" id="password" class="form-control" required>-->
<!--            </div>-->
<!--            <button type="submit" class="btn btn-primary">Register</button>-->
<!--        </form>-->

<!--        <p class="login-link">Already have an account? <a href="/login">Login</a></p>-->
<!--    </div>-->
<!--</body>-->

<!--</html>-->
